<template>
	<Wrapper>
		<image v-if="prefixIcon" :src="prefixIcon" class="prefix icon"/>
		<input_native
			@input="$emit('input', $event)"
			:value="defaultValue"
			:placeholder="placeholder"
			:maxlength="maxlength"
			:type="type"/>
		<image v-if="suffixIcon" :src="suffixIcon" class="suffix icon"/>
	</Wrapper>
</template>

<script>
	import Wrapper from '../wrapper/index.vue'
	import input_native from '../index.vue'
	let icons = {
		'user': '/static/images/login/login-user.png',
		'phone': '/static/images/login/login-mobile.png',
		'search': '/static/images/login/search.png'
	}
	export default {
		components: {
			Wrapper, input_native
		},
		props: {
			defaultValue: {
				type: String,
				default: ''
			},
			type: { // number、idcard、digit
				type: String,
				default: 'text'
			},
			maxlength: {
				type: String,
				default: '50'
			},
			placeholder: {
				type: String,
				default: ''
			},
			prefix: {
				type: String,
				default: ''
			},
			suffix: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				prefixIcon: icons[this.prefix],
				suffixIcon: icons[this.suffix]
			}
		},
	}
</script>

<style scoped>
	input_native {
		width: 100%;
	}
	.icon {
		width: 32upx;
		height: 32upx;
	}
	.prefix {
		margin-right: 5upx;
	}
	.suffix {
		margin: 0upx 10upx;
	}
</style>
